<template>
	<view>

		<view class="contenter">
			<view class="cu-form-group">
				<view class="title">小区</view>
				{{plotNum?plotNum:""}}
			</view>
			
			<view class="cu-form-group">
				<view class="title">投诉人</view>
				<input id="complaintName" :value="complaintName" @input="bindInput" placeholder="请输入投诉人姓名"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input id="tel" :value="tel" @input="bindInput" placeholder="请输入手机号"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">选择房屋</view>
				<picker bindchange="PickerChange" :value="houseTypeIndex" :range="houseCarTypes" :range-key="'houseName'"
					@change="chooseHouseTypes">
					<view class="picker">
						{{houseCarTypes[houseTypeIndex].houseName?houseCarTypes[houseTypeIndex].houseName:'请选择'}}
					</view>
				</picker>
			</view>
			
<!-- 			<view class="cu-form-group">
				<view class="title">被投诉房屋</view>
				<picker bindchange="PickerChange" :value="choiceHouseIndex" :range="HouseType" :range-key="'name'"
					@change="HouseTypechange">
					<view class="picker">
						{{HouseType[choiceHouseIndex].name}}
					</view>
				</picker>
			</view> -->
<!-- 			<view class="cu-form-group">
				<view class="title">投诉房间</view>
				<input v-model="repairLocal" placeholder="例 :1栋1单元1001室" class="text-right"></input>
			</view> -->

<!-- 			<view class="cu-form-group">
				<view class="title">投诉类型</view>
				<picker bindchange="PickerChange" :value="repairTypeIndex" :range="repairTypes"
					@change="repairTypeChange">
					<view class="picker">
						{{repairTypes[repairTypeIndex].typeName}}
					</view>
				</picker> 
			</view> -->



			<view class="block__title">备注</view>
			<view class="cu-form-group margin-top">
				<textarea id="context" :value="context" @input="bindInput" placeholder="请输入投诉内容"></textarea>
			</view>
		</view>

		<view class="submit_btn">
			<button type="primary" @click="bindOwner()">提交</button>
		</view>
	</view>
</template>

<script>
	// pages/enterCommunity/enterCommunity.js
	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';

	import {
		checkPhoneNumber
	} from '../../lib/java110/utils/StringUtil.js'
	import context from '../../lib/java110/Java110Context.js'
	const constant = context.constant;
	const factory = context.factory;
	import {
		formatDate,
		formatHourAndMin
	} from '@/lib/java110/utils/DateUtil.js'

	export default {
		data() {
			return {
				houseCarTypes:'',
				houseTypeIndex:'',
				
				plotNum:'', //小区名
				plotCommunityId:'',  //小区id
				repairTypes: "",
				repairTypeIndex: 0,
				todayDate: '',
				todayDateTime: '',
				minDate: new Date().getTime(),
				bindTime: '请选择',
				ownerName: '张三',
				imgList: [],
				imageIndex: 0,
				index: null,
				complaintIndex: 0,
				roomCloums: [],
				roomIdArr: [],
				roomId: '',
				roomShow: false,
				typeName: '请选择',
				photoList: [],
				tel: '',
				context: '',
				complaintName: '',
				storeId: '',
				photos: [],
				communityId: "",
				userId:'',
				bindState:"",
				
				houseNum:'',
				houseId:'',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			context.onLoad(options);
			that.chooseCar()
			let identity = uni.getStorageSync("bindUserInfo");
			that.bindState = identity.bindState
			//加载报修类型
			
			let countryId = uni.getStorageSync("_selectCommunity");
			this.communityId = countryId.id
			let ownerId = uni.getStorageSync("commonUser");
			this.userId = ownerId.id
			// that._loadRepairTypes();
			
			let _homeNum = uni.getStorageSync("_selectHome");
			if (_homeNum != null && _homeNum != undefined && _homeNum != '') {
				this.houseNum = _homeNum.houseName;
				this.houseId = _homeNum.id; //房屋id
			}

		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _plotNum = uni.getStorageSync("_selectCommunity");
			// this.plotNum = _plotNum.communityName + "小区";
		
			if (_plotNum != null && _plotNum != undefined && _plotNum != '') {
				this.plotNum = _plotNum.communityName + "小区";
				this.plotCommunityId = _plotNum.id; //小区id
				console.log("小区ID", this.plotCommunityId)
				uni.setStorageSync('plotCommunityId',this.plotCommunityId);
			}
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			//查询投诉类型
			// _loadRepairTypes() {
			// 	uni.request({
			// 		url: constant.url.listRepairSettings,
			// 		method: "GET",
			// 		data: {
			// 			communityId: 1,
			// 		},
			// 		success: (res) => {
			// 			this.repairTypes = res.data.data
			// 			this.repairTypes = this.repairTypes.map((item, index) => {
			// 				return Object.assign({}, {
			// 					'typeName': item.typeName,
			// 				})
			// 			})
			// 			console.log("this.repairTypes", this.repairTypes)
			// 			let newRepairCloums = [];
			// 			for (let item in this.repairTypes) {
			// 				newRepairCloums.push(this.repairTypes[item].typeName);
			// 			}
			// 			this.repairTypes = newRepairCloums
			// 			// 下面是得到的结果
			// 			console.log("报修", this.repairTypes)
			// 		},
			// 		fail: function(e) {
			// 			wx.showToast({
			// 				title: "服务器异常了",
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		}
			// 	});
			// },
			
			// 选择已绑定的房屋
			chooseCar(){
				let commonUserNum = uni.getStorageSync("commonUser");
				this.phone = commonUserNum.phone; //小区id
				uni.request({
					url: constant.url.choiceHasHouse,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone: this.phone,
					},
					success: (res) => {
						this.houseCarTypes = res.data.result
						console.log("查询已绑定的房屋",this.houseCarTypes)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			
			// 选择房屋
			chooseHouseTypes: function(e) {
				this.houseTypeIndex = e.target.value //取其下标
				this.houseId = this.houseCarTypes[this.houseTypeIndex].id //获取选中的数组
				console.log("this.houseId",this.houseId)
				// this.typeName = this.carTypes[this.houseTypeIndex].typeName //获取选中的数组
				// this.roleId = this.carTypes[this.houseTypeIndex].roleId //获取选中的数组
				// console.log("报修类型",this.roleId)
			},
			
			HouseTypechange: function(e) {
				this.choiceHouseIndex = e.target.value //取其下标
				let selected = this.HouseType[this.choiceHouseIndex] //获取选中的数组
				this.roomId = selected.id
				console.log("房屋id", this.roomId)
			},
			ChooseImage: function(e) {
				let that = this;
				wx.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res);
						that.$data.imgList.push(res.tempFilePaths[0]);
						var tempFilePaths = res.tempFilePaths[0]

						//#ifdef H5
						TanslateImage.translate(tempFilePaths, (url) => {
							that.photos.push(url);
						})
						//#endif

						//#ifdef MP-WEIXIN
						factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
							that.photos.push(_res);
						});
						//#endif
					}
				});
			},
			// repairTypeChange: function(e) {
			// 	this.typeName = this.repairTypes[e.detail.value]; //取其下标
			// },
			deleteImage: function(e) {
				let imageArr = this.$data.imgList;
				let photoArr = this.$data.photos;
				imageArr.splice(e, 1);
				photoArr.splice(e, 1);
			},
			_changeComplaint: function(e) {
				this.typeName = this.columns[e.detail.value];
				this.typeCd = this.typeCds[e.detail.value];
			},
			_changeRoom: function(e) {
				this.roomName = this.roomCloums[e.detail.value];
				this.roomId = this.roomIdArr[e.detail.value];
			},
			bindInput: function(e) {
				console.log('数据监听', e);
				switch (e.target.id) {
					case "complaintName":
						this.$data.complaintName = e.detail.value;
						break;
					case "tel":
						this.$data.tel = e.detail.value;
						break;
					case "context":
						this.$data.context = e.detail.value;
						break;
				}
				console.log(this);
			},
			bindOwner: function(e) {
				// if(this.bindState == 1){
					let obj = {
						// "repairTypeIndex": 
						// "complaintPersonName": 
						// "complaintPersonPhone": this.tel,
						// "complaintType": 0,
						// "houseId": this.roomId,
						// "communityId": 1,
						// "context": this.context,
					
						"communityId": this.communityId,
						"complaintPersonName": this.complaintName,
						"complaintPersonPhone": this.tel,
						"complaintType": this.repairTypeIndex,
						"houseId": this.houseId,
						"content":this.context,
						"id": this.userId
					
					};
					// let _photos = this.photos;
					
					// _photos.forEach(function(_item) {
					// 	obj.photos.push({
					// 		"photo": _item
					// 	});
					// });
					
					// 预约时间校验
					// let oppoTime = Date.parse(new Date(obj.appointmentTime.replace(/-/g, '/'))),
					// 	now = Date.parse(new Date());
					let msg = "";
					
					if (obj.complaintPersonName == "") {
						msg = "请填写投诉人";
					} else if (obj.complaintPersonPhone == "") {
						msg = "请填写手机号";
						// } else if (!checkPhoneNumber(obj.tel)) {
						// 	msg = "手机号有误";
					// } else if (obj.complaintType == '') {
					// 	msg = "请填写投诉类型";
						// } else if (obj.bindTime == "请选择") {
						// 	msg = "请选择预约时间";
						// } else if (now - oppoTime > 1800 * 1000) {
						// 	msg = "预约时间有误";
					} 
					// else if (obj.context == "") {
					// 	msg = "请填写投诉内容";
					// }
					
					if (msg != "") {
						wx.showToast({
							title: msg,
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.request({
							url: constant.url.complaintsSubmit,
							header: context.getHeaders(),
							method: "POST",
							data: obj,
							//动态数据
							success: function(res) {
								let _json = res.data;
								// if (_json.code == 0) {
								uni.redirectTo({
									url: '/pages/complaintList/complaintList',
								});
								return;
								// }
								wx.showToast({
									title: "服务器异常了",
									icon: 'none',
									duration: 2000
								})
							},
							fail: function(e) {
								wx.showToast({
									title: "服务器异常了",
									icon: 'none',
									duration: 2000
								});
							}
						});
					}
				// }else{
				// 	wx.showToast({
				// 		title: "您不是该小区成员,请确认身份",
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// }
				
			},
			onChange: function(e) {
				console.log(e);
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import "./complaint.css";

	.contenter {
		width: 100%;
		height: calc(100vh - 120rpx);
		overflow-y: auto;
	}

	.submit_btn {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;

		button {
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
		}

	}
</style>
